export default function updateElementNode(element, virtualDOM, oldVirtualDOM = {}) {
    const props = virtualDOM.props || {}
    const oldProps = oldVirtualDOM.props || {}

    Object.keys(props).forEach(propName => {
        const propValue = props[propName]
        const oldPropVlue = oldProps[propName]

        if(propValue === oldPropVlue) return

        if(propName.slice(0, 2) === 'on') {
            const eventName = propName.toLowerCase().slice(2)
            element.addEventListener(eventName, propValue)
            // 删除原有事件监听
            if(oldPropVlue) {
                element.removeEventListener(eventName, oldPropVlue)
            }
        }else if(propName === 'value' || propName === 'checked') {
            element[propName] = propValue
        }else if(propName === 'className') {
            element.setAttribute('class', propValue)
        }else if(propName !== 'children') {
            element.setAttribute(propName, propValue)
        }
    })

    Object.keys(oldProps).forEach(propName => {
        // 属性存在props 中，已处理过直接返回
        if(propName in props) return

        // 属性不存在于props中，即属性被删除了
        if(propName.slice(0, 2) === 'on') {
            const eventName = propName.toLowerCase().slice(2)
            element.removeEventListener(eventName, oldProps[propName])
        }else if(propName !== 'children') {
            element.removeAttrubute(propName)
        }
    })
}